<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.meta.menuName }}</div>
    <!-- 表格操作 -->
    <div class="operation-container">
      <!-- 条件筛选 -->
      <div style="margin-left:auto;margin-top: 3px;display: flex " >
        <!-- 订单状态 -->
        <el-select
            clearable
            size="small"
            v-model="orderStatus"
            filterable
            placeholder="请选择订单状态"
            style="margin-right:1rem"
        >
          <el-option
              v-for="(item,key) in orderStatusList"
              :key=key
              :label="item.name"
              :value="item.id"
          />
        </el-select>
        <!-- 支付状态 -->
        <el-select
            clearable
            size="small"
            v-model="payStatus"
            filterable
            placeholder="请选择订单状态"
            style="margin-right:1rem"
        >
          <el-option
              v-for="(item,key) in payStatusList"
              :key=key
              :label="item.name"
              :value="item.id"
          />
        </el-select>

      </div>
    </div>
    <el-table

        :data="tableData"
        style="width: 100%"
        max-height="500">
      <!-- 订单号 -->
      <el-table-column prop="orderNo" label="订单号" align="center" />
      <!-- 下单手机号码 -->
      <el-table-column prop="user.nickName" label="下单用户" align="center" />
       <!-- 总价钱 -->
      <el-table-column prop="total" label="总价钱" align="center" />
      <!-- 订单状态 -->
      <el-table-column prop="status" label="订单状态" align="center">
        <template slot-scope="scope">
          {{ OrderStatus(scope.row.status)}}
        </template>
      </el-table-column>
      <!-- 支付状态 -->
      <el-table-column prop="payStatus" label="支付状态" align="center">
        <template slot-scope="scope">
          {{ PayStatus(scope.row.payStatus)}}
        </template>
      </el-table-column>
      <!-- 创建时间 -->
      <el-table-column
          :default-sort = "{prop: 'createdAt', order: 'descending'}"
          :sort-method ="sortMethod" :sortable="true" prop="createdAt" label="下单时间" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px" />
          {{
            parseAt(scope.row.createdAt, "{h}:{i}:{s}")
          }}
        </template>
      </el-table-column>
      <!-- 预约时间 -->
      <el-table-column
          :default-sort = "{prop: 'edc', order: 'descending'}"
          :sort-method ="sortMethod" :sortable="true" prop="edc" label="预约时间" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px" />
          {{
            parseAt(scope.row.edc, "{h}:{i}:{s}")
          }}
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="editRow(scope.row.id)"
              type="text"
              size="small">
            处理
          </el-button>
          <el-button
              @click.native.prevent="openOrderWindows(scope.row.id)"
              type="text"
              size="small">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    isShow控制开关，closeEdit关闭的回调-->
    <order-edit ref="orderEdit" :is-show="isShow" @close="closeEdit" />

  </el-card>

</template>

<script>
import {getRealOrderTimeByStatus} from "@/api/orderEdit";
import {parseTime} from "@/utils/data";
import OrderEdit from "@/views/components/orderEdit";

const {useWebSocket} = require("@/hooks");
export default {
  components: {OrderEdit},
  methods: {
    closeEdit(){
      this.isShow=false;
      this.getRealOrderTimeByStatus();
    },
    sortMethod(n1,n2){

      return n2-n1;
      // let m1 = n1.split(":");
      // let m2 = n2.split(":");
      // for(let i=0;i<m1.length;i++)
      // {
      //   if(m1!=m2)
      //   {
      //
      //   }
      // }

    },

    parseAt(data ,str){
     return  parseTime(data,str)
    },
    openOrderWindows(id){
      console.log(id)
    },
    editRow(id){
      this.$refs.orderEdit.listArticles(id).then(()=>{
        this.isShow=true;
      })
      // this.$router.push({name:'orderEdit',params:{
      //   id:id
      //   }});
    },
     async getRealOrderTimeByStatus() {
      const params = {
        payStatus:this.payStatus,
        orderStatus:this.orderStatus
      }
       const res = await getRealOrderTimeByStatus(params);
       this.tableData=[];
       this.tableData=res.data;
     },
    handleMessage (e) {
    const dataStr = e.data
    const res = JSON.parse(dataStr)
    console.log('消息')
    console.log(res)
       // private Integer mesType;     //1：系统消息；2：文本消息；4：发在私聊的图片消息；5：发在群聊的图片消息
       // private String fromName; //
       // private Object message;
    switch (res.mesType) {
      case 1: // 系统广播消息
        break
      case 2: // 文本消息
        this.tableData.push(res.message);
        break
    }
}
  },
  created() {
    const ws = useWebSocket(this.handleMessage)
    this.ws = ws
    this.getRealOrderTimeByStatus();

  },
  watch:{
    orderStatus(){
      this.getRealOrderTimeByStatus();
    },
    payStatus(){
      this.getRealOrderTimeByStatus();
    },
  },
  computed: {
    PayStatus() {
      return function(code) {
        let name = "";
        switch (code) {
          case "1"||1:
            name = "待支付";
            break;
          case "2"||2:
            name = "已支付";
            break;
          case "3"||3:
            name = "已退款";
            break;
        }
       return name;
      };
    },
    OrderStatus() {
      return function(code) {
        let name = "";
        switch (code) {
          case "1"||1:
            name = "待处理";
            break;
          case "2"||2:
            name = "已处理";
            break;
          case "3"||3:
            name = "已发货";
            break;
          case "4"||4:
            name = "已取消";
        }
        return name;
      };
    },
  },
  data() {
    return {
      isShow:false,
      ws: null,
      tableData: [],
      orderStatusList:[
        {
          id:"1",
          name:"待处理"
        },
        {
          id:"2",
          name:"处理中"
        },
        {
          id:"3",
          name:"已发货"
        },
        {
          id:"4",
          name:"已取消"
        },
      ],
      orderStatus:"1",
      payStatus:"1",
      payStatusList:[
        {
          id:"1",
          name:"待支付"
        },
        {
          id:"2",
          name:"已支付"
        },
        {
          id:"3",
          name:"已退款"
        },
      ],
    }
  }
}
</script>
